<template>
  <div class="wrap">
    <el-dialog
      title="无价格轴体"
      :visible.sync="showNoPriceDialog"
      width="30%"
      class="no-price-dialog"
    >
      <div class="switch-tag">
        <el-tag
          v-for="(item, index) of noPriceSwitchList"
          type="success"
          effect="dark"
          :key="index"
        >
          {{ item }}
        </el-tag>
      </div>
    </el-dialog>
    <el-dialog
      title="无库存轴体"
      :visible.sync="showNoStoreDialog"
      width="30%"
      class="no-store-dialog"
    >
      <div class="switch-tag">
        <el-tag
          v-for="(item, index) of noStoreSwitchList"
          type="warning"
          effect="dark"
          :key="index"
        >
          {{ item }}
        </el-tag>
      </div>
    </el-dialog>
    <el-dialog title="轴体清单" :visible.sync="showListDialog">
      <el-table :data="testerSwitchList">
        <el-table-column
          property="index"
          label="序号"
          width="100"
        ></el-table-column>
        <el-table-column
          property="switchSimpleName"
          label="轴体名称"
          width="150"
        ></el-table-column>
        <el-table-column
          property="amount"
          label="数量"
          width="100"
        ></el-table-column>
        <el-table-column property="note" label="位置"></el-table-column>
      </el-table>
    </el-dialog>
    <div class="button-row">
      <el-button type="primary" @click="returnList">返回试轴器列表</el-button>
    </div>
    <div class="tester-info">
      <div class="item">
        <div class="desc">创建人：</div>
        <div class="username">{{ userName }}</div>
      </div>
      <div class="item">
        <div class="desc">创建时间：</div>
        <div class="create-time">{{ createTime }}</div>
      </div>
      <div class="item">
        <div class="desc">最后修改时间：</div>
        <div class="create-time">{{ updateTime }}</div>
      </div>
    </div>
    <div class="input">
      <span class="desc">试轴器名称：</span>
      <el-input v-model="name" class="name" :disabled="true"></el-input>
      <el-checkbox
        v-model="open"
        label="是否公开"
        border
        :disabled="true"
      ></el-checkbox>
      <el-switch
        v-model="showSalePrice"
        active-text="显示价格"
        inactive-text="不显示价格"
      >
      </el-switch>
    </div>
    <el-button type="warning" @click="calTotalPrice">计算轴体价格</el-button>
    <el-button type="success" @click="checkout">出库</el-button>
    <el-button type="primary" @click="showList">查看轴体清单</el-button>
    <span class="price" v-show="totalPrice != null"
      >成本价：{{ totalPrice }} 元</span
    >
    <span class="price" v-show="totalCount != null"
      >数量：{{ totalCount }} 颗</span
    ><span class="price" v-show="totalPrice != null"
      >销售价：{{ totalSalePrice }} 元</span
    >
    <el-button
      type="danger"
      v-show="noPriceSwitchList.length != 0"
      @click="showNoPriceDialog = true"
      >查看无价格轴体</el-button
    >
    <el-button
      type="warning"
      v-show="noStoreSwitchList.length != 0"
      @click="showNoStoreDialog = true"
      >查看无库存轴体</el-button
    >
    <div class="plate">
      <div
        class="row-cell"
        :style="{ width: rowCellWidth }"
        v-for="row in rowCount"
        :key="row"
      >
        <div class="col-cell" v-for="col in colCount" :key="col">
          <div
            class="cell"
            :style="{
              backgroundColor: backgroundColor(row, col),
              color: textColor(row, col)
            }"
          >
            <div>{{ switchText(row, col) }}</div>
            <div>[{{ switchTypeText(row, col) }}]</div>

            <div
              class="sale-price"
              v-if="switchSalePrice(row, col) != ''"
              v-show="showSalePrice"
            >
              {{ switchSalePrice(row, col) }}元
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Button,
  Input,
  Checkbox,
  Dialog,
  Tag,
  Table,
  TableColumn,
  Switch
} from "element-ui";
import {
  getAdminTesterDetail,
  calAdminTesterPrice,
  checkoutAdminTester,
  showListAdminTester
} from "@/api/admin-tester.js";
export default {
  name: "view-tester",
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
    [Checkbox.name]: Checkbox,
    [Dialog.name]: Dialog,
    [Tag.name]: Tag,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Switch.name]: Switch
  },
  data() {
    return {
      plateId: null,
      name: "",
      userId: null,
      userName: "",
      rowCount: null,
      colCount: null,
      openDesc: "",
      open: false,
      privilegeToEdit: null,
      createTime: "",
      updateTime: "",
      cellVoList: [],
      totalPrice: null,
      totalCount: null,
      totalSalePrice: null,
      showSalePrice: true,
      noPriceSwitchList: [],
      noStoreSwitchList: [],
      showNoPriceDialog: false,
      showNoStoreDialog: false,
      showListDialog: false,
      testerSwitchList: []
    };
  },
  mounted() {
    this.plateId = this.$route.params.id;
    this.reRenderTester();
  },
  methods: {
    reRenderTester() {
      getAdminTesterDetail(this.plateId)
        .then(res => {
          this.name = res.name;
          this.userId = res.userId;
          this.userName = res.userName;
          this.rowCount = res.rowCount;
          this.colCount = res.colCount;
          this.openDesc = res.openDesc;
          this.open = res.open;
          this.privilegeToEdit = res.privilegeToEdit;
          this.createTime = res.createTime;
          this.updateTime = res.updateTime;
          this.cellVoList = res.cellVoList;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    returnList() {
      this.$router.push({ path: `/backend/tester` });
    },
    switchText(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return this.cellVoList[index].simpleName;
    },
    switchTypeText(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return this.cellVoList[index].switchTypeName;
    },
    switchSalePrice(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return this.cellVoList[index].salePrice;
    },
    backgroundColor(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return "#" + this.cellVoList[index].backgroundColor;
    },
    textColor(row, col) {
      let index = (row - 1) * this.colCount + col - 1;
      return "#" + this.cellVoList[index].color;
    },
    calTotalPrice() {
      calAdminTesterPrice(this.plateId)
        .then(res => {
          this.totalPrice = res.totalPrice;
          this.totalCount = res.totalCount;
          this.totalSalePrice = res.totalSalePrice;
          this.noPriceSwitchList = res.noPriceSwitchList;
          this.noStoreSwitchList = res.noStoreSwitchList;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    checkout() {
      this.$confirm("轴体出库, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          checkoutAdminTester(this.plateId)
            .then(res => {
              this.$alert("出库成功");
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    showList() {
      showListAdminTester(this.plateId)
        .then(res => {
          res.forEach((item, index) => (item.index = index + 1));
          this.testerSwitchList = res;
          this.showListDialog = true;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  },
  computed: {
    rowCellWidth() {
      return this.colCount * 110 + "px";
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  .no-price-dialog {
    .switch-tag {
      .el-tag {
        margin: 3px 3px;
        cursor: pointer;
      }
    }
  }

  .button-row {
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
  }

  .tester-info {
    margin-top: 10px;

    .item {
      color: #444;
      margin-right: 20px;
      display: inline-block;
      background-color: #ccc;
      font-size: 16px;

      div {
        display: inline-block;
      }
    }
  }

  .input {
    margin-top: 10px;

    .desc {
      line-height: 40px;
      position: absolute;
      width: 100px;
    }

    .name {
      width: 400px;
      margin-left: 100px;
    }
  }

  .price {
    height: 40px;
    margin: 0 4px;
    line-height: 38px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0 4px;
  }

  .plate {
    margin-top: 5px;
    position: relative;

    .row-cell {
      height: 110px;
      overflow: auto;

      .col-cell {
        float: left;

        .cell {
          width: 100px;
          height: 100px;
          border: 1px solid black;
          margin-right: 4px;
          text-align: center;
          line-height: 25px;
          cursor: pointer;
          font-size: 16px;
          overflow: hidden;
          position: relative;

          .sale-price {
            font-weight: bold;
            position: absolute;
            left: 25px;
            bottom: 5px;
          }

          &:hover {
            border: 1px dashed green;
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>